<template>
  <view class="user-center-container">
    <!-- 用户信息头部 -->
    <view class="user-header">
      <view class="user-info" @click="goToProfile">
        <image :src="userInfo.avatar || 'https://placehold.co/120x120/png?text=Avatar'" class="user-avatar" mode="aspectFill"></image>
        <view class="user-detail">
          <text class="user-name">{{ userInfo.nickname || '未登录' }}</text>
          <text class="user-phone" v-if="userInfo.phone">{{ userInfo.phone }}</text>
          <text class="login-tip" v-else @click="login">点击登录</text>
        </view>
        <uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
      </view>
      
      <view class="user-stats">
        <view class="stat-item" @click="goToBalance">
          <text class="stat-value">¥{{ userInfo.balance || '0.00' }}</text>
          <text class="stat-label">余额</text>
        </view>
        <view class="stat-item" @click="goToInvite">
          <text class="stat-value">{{ inviteStats.total_invites || 0 }}</text>
          <text class="stat-label">邀请好友</text>
        </view>
        <view class="stat-item" @click="goToCommission">
          <text class="stat-value">¥{{ inviteStats.total_commission || '0.00' }}</text>
          <text class="stat-label">累计佣金</text>
        </view>
      </view>
    </view>

    <!-- 订单管理 -->
    <view class="order-section">
      <view class="section-header">
        <text class="section-title">我的订单</text>
        <view class="more-btn" @click="goToOrderList">
          <text>全部订单</text>
          <uv-icon name="arrow-right" size="12" color="#999"></uv-icon>
        </view>
      </view>
      
      <view class="order-tabs">
        <view class="tab-item" v-for="tab in orderTabs" :key="tab.status" @click="goToOrderList(tab.status)">
          <uv-icon :name="tab.icon" size="24" color="#666"></uv-icon>
          <text class="tab-text">{{ tab.name }}</text>
          <view class="tab-badge" v-if="tab.count > 0">{{ tab.count }}</view>
        </view>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-section">
      <view class="menu-group">
        <view class="menu-item" @click="goToAddress">
          <uv-icon name="map" size="20" color="#ff6b00"></uv-icon>
          <text class="menu-text">收货地址</text>
          <uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
        </view>
        <view class="menu-item" @click="goToCoupon">
          <uv-icon name="gift" size="20" color="#ff6b00"></uv-icon>
          <text class="menu-text">优惠券</text>
          <uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
        </view>
        <view class="menu-item" @click="goToFavorite">
          <uv-icon name="heart" size="20" color="#ff6b00"></uv-icon>
          <text class="menu-text">我的收藏</text>
          <uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
        </view>
      </view>

      <view class="menu-group">
        <view class="menu-item" @click="goToInvite">
          <uv-icon name="plus-circle" size="20" color="#ff6b00"></uv-icon>
          <text class="menu-text">邀请好友</text>
          <view class="menu-right">
            <text class="menu-desc">赚佣金</text>
            <uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
          </view>
        </view>
        <view class="menu-item" @click="goToCommission">
          <uv-icon name="integral" size="20" color="#ff6b00"></uv-icon>
          <text class="menu-text">佣金管理</text>
          <uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
        </view>
        <view class="menu-item" @click="goToLeader">
          <uv-icon name="bag" size="20" color="#ff6b00"></uv-icon>
          <text class="menu-text">成为团长</text>
          <uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
        </view>
      </view>

      <view class="menu-group">
        <view class="menu-item" @click="goToCustomerService">
          <uv-icon name="kefu-ermai" size="20" color="#ff6b00"></uv-icon>
          <text class="menu-text">客服中心</text>
          <uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
        </view>
        <view class="menu-item" @click="goToSettings">
          <uv-icon name="setting" size="20" color="#ff6b00"></uv-icon>
          <text class="menu-text">设置</text>
          <uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
        </view>
        <view class="menu-item" @click="goToAbout">
          <uv-icon name="info-circle" size="20" color="#ff6b00"></uv-icon>
          <text class="menu-text">关于我们</text>
          <uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
        </view>
      </view>
    </view>

    <!-- 邀请海报弹窗 -->
    <uv-popup ref="invitePopup" type="center">
      <view class="invite-popup">
        <view class="popup-header">
          <text class="popup-title">邀请好友</text>
          <uv-icon name="close" size="20" color="#999" @click="closeInvitePopup"></uv-icon>
        </view>
        <view class="popup-content">
          <image :src="invitePoster" class="invite-poster" mode="aspectFit"></image>
          <view class="invite-info">
            <text class="invite-code">邀请码：{{ inviteStats.invite_code }}</text>
            <text class="invite-desc">分享给好友，双方都能获得奖励</text>
          </view>
          <view class="invite-actions">
            <button class="share-btn" @click="shareInvite">分享给好友</button>
            <button class="save-btn" @click="savePoster">保存海报</button>
          </view>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script>
import { userApi, inviteApi } from '../../api/index.js'

export default {
  data() {
    return {
      userInfo: {},
      inviteStats: {},
      orderTabs: [
        { status: 'pending_pay', name: '待支付', icon: 'integral', count: 0 },
        { status: 'pending_accept', name: '待接单', icon: 'clock', count: 0 },
        { status: 'delivering', name: '配送中', icon: 'car', count: 0 },
        { status: 'completed', name: '已完成', icon: 'checkmark-circle', count: 0 }
      ],
      invitePoster: ''
    }
  },
  
  onLoad() {
    this.initPage()
  },
  
  onShow() {
    this.loadUserInfo()
    this.loadInviteStats()
  },
  
  methods: {
    // 初始化页面
    async initPage() {
      this.loadUserInfo()
      this.loadInviteStats()
    },
    
    // 加载用户信息
    async loadUserInfo() {
      try {
        const data = await userApi.getUserInfo()
        this.userInfo = data
      } catch (error) {
        console.error('加载用户信息失败', error)
      }
    },
    
    // 加载邀请统计
    async loadInviteStats() {
      try {
        const data = await inviteApi.getInviteStats()
        this.inviteStats = data
      } catch (error) {
        console.error('加载邀请统计失败', error)
      }
    },
    
    // 登录
    login() {
      // 这里应该调用微信登录
      uni.showToast({
        title: '请先登录',
        icon: 'none'
      })
    },
    
    // 跳转个人资料
    goToProfile() {
      this.$navigateTo('/pages/user/profile')
    },
    
    // 跳转余额
    goToBalance() {
      this.$navigateTo('/pages/user/balance')
    },
    
    // 跳转订单列表
    goToOrderList(status = '') {
      this.$navigateTo(`/pages/order/list?status=${status}`)
    },
    
    // 跳转地址管理
    goToAddress() {
      this.$navigateTo('/pages/address/list')
    },
    
    // 跳转优惠券
    goToCoupon() {
      this.$navigateTo('/pages/coupon/list')
    },
    
    // 跳转收藏
    goToFavorite() {
      this.$navigateTo('/pages/user/favorite')
    },
    
    // 跳转邀请好友
    goToInvite() {
      this.showInvitePopup()
    },
    
    // 跳转佣金管理
    goToCommission() {
      this.$navigateTo('/pages/user/commission')
    },
    
    // 跳转成为团长
    goToLeader() {
      this.$navigateTo('/pages/leader/apply')
    },
    
    // 跳转客服中心
    goToCustomerService() {
      // 这里可以跳转到客服页面或打开客服会话
      uni.showToast({
        title: '客服功能开发中',
        icon: 'none'
      })
    },
    
    // 跳转设置
    goToSettings() {
      this.$navigateTo('/pages/user/settings')
    },
    
    // 跳转关于我们
    goToAbout() {
      this.$navigateTo('/pages/user/about')
    },
    
    // 显示邀请弹窗
    async showInvitePopup() {
      try {
        const data = await inviteApi.generatePoster()
        this.invitePoster = data.poster_url
        this.$refs.invitePopup.open()
      } catch (error) {
        this.$showToast('生成海报失败')
      }
    },
    
    // 关闭邀请弹窗
    closeInvitePopup() {
      this.$refs.invitePopup.close()
    },
    
    // 分享邀请
    shareInvite() {
      uni.share({
        provider: 'weixin',
        scene: 'WXSceneSession',
        type: 0,
        href: this.inviteStats.invite_url,
        title: '社区惠购 - 邀请好友享优惠',
        summary: '邀请好友注册，双方都能获得奖励',
        imageUrl: this.invitePoster,
        success: () => {
          uni.showToast({
            title: '分享成功'
          })
        },
        fail: () => {
          uni.showToast({
            title: '分享失败'
          })
        }
      })
    },
    
    // 保存海报
    savePoster() {
      uni.saveImageToPhotosAlbum({
        filePath: this.invitePoster,
        success: () => {
          uni.showToast({
            title: '保存成功'
          })
        },
        fail: () => {
          uni.showToast({
            title: '保存失败'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.user-center-container {
  min-height: 100vh;
  background-color: $uni-bg-color-grey;
}

.user-header {
  background: linear-gradient(135deg, #ff6b00 0%, #ff8c00 100%);
  padding: 40rpx 30rpx;
  color: #fff;
  
  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
    
    .user-avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      margin-right: 30rpx;
      border: 4rpx solid rgba(255, 255, 255, 0.3);
    }
    
    .user-detail {
      flex: 1;
      
      .user-name {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }
      
      .user-phone {
        font-size: 28rpx;
        opacity: 0.8;
      }
      
      .login-tip {
        font-size: 28rpx;
        opacity: 0.8;
      }
    }
  }
  
  .user-stats {
    display: flex;
    justify-content: space-around;
    
    .stat-item {
      text-align: center;
      
      .stat-value {
        display: block;
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }
      
      .stat-label {
        font-size: 24rpx;
        opacity: 0.8;
      }
    }
  }
}

.order-section {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.06);
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .section-title {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
    }
    
    .more-btn {
      display: flex;
      align-items: center;
      color: #999;
      font-size: 24rpx;
    }
  }
  
  .order-tabs {
    display: flex;
    justify-content: space-around;
    
    .tab-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      
      .tab-text {
        font-size: 24rpx;
        color: #666;
        margin-top: 10rpx;
      }
      
      .tab-badge {
        position: absolute;
        top: -5rpx;
        right: -10rpx;
        background-color: #ff4444;
        color: #fff;
        font-size: 20rpx;
        padding: 2rpx 8rpx;
        border-radius: 10rpx;
        min-width: 30rpx;
        text-align: center;
      }
    }
  }
}

.menu-section {
  margin: 20rpx;
  
  .menu-group {
    background-color: #fff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.06);
    
    .menu-item {
      display: flex;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid $uni-border-color;
      
      &:last-child {
        border-bottom: none;
      }
      
      .menu-text {
        flex: 1;
        font-size: 28rpx;
        color: #333;
        margin-left: 20rpx;
      }
      
      .menu-right {
        display: flex;
        align-items: center;
        
        .menu-desc {
          font-size: 24rpx;
          color: $uni-color-primary;
          margin-right: 10rpx;
        }
      }
    }
  }
}

.invite-popup {
  background-color: #fff;
  border-radius: 20rpx;
  width: 600rpx;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid $uni-border-color;
    
    .popup-title {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
    }
  }
  
  .popup-content {
    padding: 30rpx;
    
    .invite-poster {
      width: 100%;
      height: 400rpx;
      border-radius: 10rpx;
      margin-bottom: 30rpx;
    }
    
    .invite-info {
      text-align: center;
      margin-bottom: 30rpx;
      
      .invite-code {
        display: block;
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
        margin-bottom: 10rpx;
      }
      
      .invite-desc {
        font-size: 24rpx;
        color: $uni-text-color;
      }
    }
    
    .invite-actions {
      display: flex;
      gap: 20rpx;
      
      .share-btn, .save-btn {
        flex: 1;
        height: 80rpx;
        border-radius: 40rpx;
        font-size: 28rpx;
        border: none;
      }
      
      .share-btn {
        background-color: $uni-color-primary;
        color: #fff;
      }
      
      .save-btn {
        background-color: #f5f5f5;
        color: $uni-text-color;
      }
    }
  }
}
</style>